<template>
    <div id="Novel_Details">
        <el-row :gutter="20">
            <el-col :span="this.$store.state.elColNum">
                <el-form ref="form" :model="form" :label-width="this.$store.state.labelWidth" size="small">
                    <el-form-item label="排序权值">
                        <el-input v-model="form.list_order"></el-input>
                    </el-form-item>
                    <el-form-item label="小说标题">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="小说作者">
                        <el-input v-model="form.author"></el-input>
                    </el-form-item>
                    <el-form-item label="小说封面图链接">
                        <el-upload
                                class="avatar-uploader"
                                action="upDataUrl"
                                :show-file-list="false"
                                :http-request="myUpload1"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="form.coverpic" :src="form.coverpic" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
<!--                    <el-form-item label="小说详情图链接">-->
<!--                        <el-upload-->
<!--                                class="avatar-uploader"-->
<!--                                action="upDataUrl"-->
<!--                                :show-file-list="false"-->
<!--                                :http-request="myUpload2"-->
<!--                                :before-upload="beforeAvatarUpload">-->
<!--                            <img v-if="form.infopic" :src="form.infopic" class="avatar">-->
<!--                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--                        </el-upload>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="小说搜索图链接">-->
<!--                        <el-upload-->
<!--                                class="avatar-uploader"-->
<!--                                action="upDataUrl"-->
<!--                                :show-file-list="false"-->
<!--                                :http-request="myUpload3"-->
<!--                                :before-upload="beforeAvatarUpload">-->
<!--                            <img v-if="form.selectpic" :src="form.selectpic" class="avatar">-->
<!--                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--                        </el-upload>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="是否为分类大图">-->
<!--                        <el-select v-model="form.isbg" placeholder="请选择">-->
<!--                            <el-option label="否" value="1"></el-option>-->
<!--                            <el-option label="是" value="2"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                    <el-form-item label="小说简介">
                        <quill-editor
                                v-model="form.remark"
                                ref="myQuillEditor"
                                :options="editorOption">
                        </quill-editor>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input v-model="form.desc"></el-input>
                    </el-form-item>

                    <el-form-item label="发布栏目">
                        <el-cascader
                                v-model="areaIds"
                                :options="areaList"
                                :props="props"
                                clearable
                                style="width: 100%">
                        </el-cascader>

                    </el-form-item>
                    <el-form-item label="小说分类">
                        <el-checkbox-group v-model="form.cateids">
                            <el-checkbox :label="key" v-for="(value,key,index) in classList" :key="index">{{value}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="小说标签">
                        <el-input v-model="form.tag"></el-input>
                        <span class="input_hint">标签之间，请用 “/” 区别</span>
                    </el-form-item>
                    <el-form-item label="免费章节">
                        <el-input v-model="form.paychapter"></el-input>
                        <span class="input_hint">请输入大于0的自然数</span>
                    </el-form-item>
                    <el-form-item label="推荐推广章节">
                        <el-input v-model="form.tchapter"></el-input>
                        <span class="input_hint">请输入大于0的自然数</span>
                    </el-form-item>
                    <el-form-item :label="'付费章节金额'+this.$store.state.name">
                        <el-input v-model="form.coin"></el-input>
                        <span class="input_hint">请输入大于0的自然数</span>
                    </el-form-item>
                    <el-form-item label="热门指数">
                        <el-input v-model="form.thermal"></el-input>
                        <span class="input_hint">请输入大于0的自然数</span>
                    </el-form-item>
                    <el-form-item label="初始化人气值">
                        <el-input v-model="form.hots"></el-input>
                        <span class="input_hint">请输入大于0的自然数</span>
                    </el-form-item>
                    <el-form-item label="初始化收藏数">
                        <el-input v-model="form.likes"></el-input>
                        <span class="input_hint">请输入大于0的自然数</span>
                    </el-form-item>
                    <el-form-item label="分享标题">
                        <el-input v-model="form.sharetitle"></el-input>
                    </el-form-item>
                    <el-form-item label="分享简介">
                        <el-input v-model="form.sharedesc"></el-input>
                    </el-form-item>
                    <el-form-item label="小说状态">
                        <el-select v-model="form.iswz" placeholder="请选择">
                            <el-option label="连载中" value="1"></el-option>
                            <el-option label="已完结" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="小说属性">
                        <el-select v-model="form.isfw" placeholder="请选择">
                            <el-option label="付费" value="1"></el-option>
                            <el-option label="免费" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="新书/非新书">
                        <el-select v-model="form.isnew" placeholder="请选择">
                            <el-option label="新书" value="1"></el-option>
                            <el-option label="非新书" value="2"></el-option>
                        </el-select>
                    </el-form-item>
<!--                    <el-form-item label="长篇/短篇">-->
<!--                        <el-select v-model="form.islong" placeholder="请选择">-->
<!--                            <el-option label="长篇" value="1"></el-option>-->
<!--                            <el-option label="短篇" value="2"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                    <el-form-item label="男频/女频">
                        <el-select v-model="form.issex" placeholder="请选择">
                            <el-option label="男频" value="1"></el-option>
                            <el-option label="女频" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="App是否显示">
                        <el-select v-model="form.ishow" placeholder="请选择">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="是否为推荐">
                        <el-select v-model="form.isrecommend" placeholder="请选择">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否上架">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                    </el-form-item>

                    <!--                        <el-form-item>-->
                    <!--                            <el-button type="primary" @click="onSubmit">保存</el-button>-->
                    <!--                        </el-form-item>-->
                </el-form>
            </el-col>
        </el-row>
        <div style="display: flex;justify-content: flex-end">
            <el-button @click="closeDetails" size="small">取 消</el-button>
            <el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
        </div>
    </div>
</template>

<script>
    import {uploadimg, isRealNum} from "../../utils/common";
    import quillConfig from '../../utils/quill-config.js'

    export default {
        name: "system_site",
        props:['bookId'],
        data() {
            return {
                props: {multiple: true},
                form: {
                    title: '',
                    author: '',
                    infopic: '',
                    coverpic: '',
                    selectpic: '',
                    cateids: [],
                    isfw: '',
                    isnew: '',
                    islong: '',
                    issex: '',
                    tag: '',
                    iswz: '',
                    isbg: '',
                    remark: '',
                    list_order: '',
                    desc: '',
                    paychapter: '',
                    thermal: '',
                    hots: '',
                    likes: '',
                    sharetitle: '',
                    sharedesc: '',
                    tchapter: '',
                    coin: '',
                    isrecommend: '',
                    ishow: '',
                    status: '',
                    columnids: []
                },
                editorOption: quillConfig,
                areaList: [],
                classList: [],
                areaIds: [],
                id: '',
            }
        },
        created() {
            this.getCateIds();
            this.getAreas();
            this.id = this.bookId;
            if (this.id) {
                this.$axios.get('admin/novel/' + this.id, {}).then((res) => {
                    let data = res.data;
                    for (let key in data) {
                        if (isRealNum(data[key])) {
                            data[key] = data[key].toString()
                        }
                    }
                    data.cateids = data.cateids.split(',');
                    let newInfo = [];
                    if (data.column_info.length > 0) {
                      data.column_info.map((num) => {
                        newInfo.push([num.channel_id, num.column_id])
                      });
                    }
                    if(data.remark){
                      data.remark = this.html_decode(data.remark);
                    }
                    this.form = data;
                    this.areaIds = newInfo;
                    this.$forceUpdate()
                })
            }
        },
        methods: {
            onSubmit() {
                this.form.columnids = [];
                this.areaIds.map((num) => {
                    this.form.columnids.push(num[1]);
                });
                this.form.cateids = this.form.cateids.join(',');
                this.form.columnids = this.form.columnids.join(',');
                if (this.id) {
                    this.$axios.put("admin/novel/" + this.id, this.form).then((res) => {
                        this.$message.success('成功');
                        this.closeDetails()
                    });
                } else {
                    this.$axios.post("admin/novel", this.form).then((res) => {
                      this.$message.success('成功');
                        this.closeDetails()
                    });
                }
            },
            getCateIds() {
                this.$axios.post("admin/novel/category", '').then((res) => {
                    this.classList = res.data;
                });
            },
            getAreas() {
                this.$axios.post("admin/channel/getAll", '').then((res) => {
                    let data = res.data;
                    data.map(async (num) => {
                        num.value = num.id;
                        num.label = num.title;
                        num.children.map((item) => {
                            item.value = item.id;
                            item.label = item.title;
                        })
                    });
                    this.areaList = data;
                });
            },
            // 上传图片文件
            myUpload1(content) {
                uploadimg(content).then(res => {
                    this.form.coverpic = res;
                })
            },
            myUpload2(content) {
                uploadimg(content).then(res => {
                    this.form.infopic = res;
                })
            },
            myUpload3(content) {
                uploadimg(content).then(res => {
                    this.form.selectpic = res;
                })
            },
            beforeAvatarUpload(file) {
                var suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
                let arr = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'pdf', 'JPG', 'JPEG', 'PNG', 'GIF', 'BMP', 'PDF']
                if (arr.indexOf(suffix) === -1) {
                    this.$message.error('上传图片格式有误');
                    return false
                }
            },
            html_decode(str) {
                var s = "";
                if (str.length == 0) return "";
                s = str.replace(/&amp;/g, "&");
                s = s.replace(/&lt;/g, "<");
                s = s.replace(/&gt;/g, ">");
                s = s.replace(/&nbsp;/g, " ");
                s = s.replace(/&#39;/g, "\'");
                s = s.replace(/&quot;/g, "\"");
                s = s.replace(/<br\/>/g, "\n");
                return s;
            },
            closeDetails() {
                this.$emit("closeDatails", false)
            }

        }
    }
</script>

<style scoped lang="scss">

</style>